<template>
	<view class="container">
		<nav-top :title="title" :type="navType" />
		<nav-background :url = "navBackgroundUrl" :imageHeight="navTopBackgroundHeight" />	
		<view class="contral">
			<view class="current title" :class="{'active' : content==='current'}" @click="content = 'current'">
				当前
			</view>
			<view class="history title" :class="{'active' : content==='history'}" @click="content = 'history'">
				历史
			</view>	
		</view>
		
		<Current v-if="content==='current'"/>
		<History v-else="content==='history'" />
	</view>  
</template>

<script setup>
	import navBackgroundUrl from "@/static/images/order/orderTopBar@2x.png";
	import Current from "./Current/Current.vue";
	import History from "./History/History.vue";
	import { provide,reactive,ref } from "vue";
	import { onLoad} from "@dcloudio/uni-app"
	import request from "@/Api/request.js"
	const title = "我的订单";
	const navType = "commen";
	const navTopBackgroundHeight = 236
	const content = ref("current")
	const currentData = ref();
	let information= reactive([]);
	
	provide('currentData', currentData)
	provide('orderInformation',information)
	onLoad((options)=>{
		console.log("options:::",options);
		request({
			url:"/order/current",
			method:"GET",
		}).then((res)=>{
			for (let i of res) {
				information.push(i)
			}
			console.log("订单显示:::",res);
			currentData.value = res;
			console.log("information:::",information);
		})
	})
</script>

<style lang="scss" scoped>
.container{
	position: relative;	
}
.contral{
	display: flex;
	margin: 46rpx 0 26rpx;
		.current,.history{
			width: 50%;
			text-align: center;
		}
		
		.title{
			color: #999999;
			font-weight: 400;
			font-size: 32rpx;
		}
		
		.active{
			color: #333333;
			font-weight: 600;
			font-size: 32rpx;
				position: relative;
		}
		
		.active::after{
			content: "";
			position: absolute;
			width: 	32rpx;
			height: 8rpx;
			background: #FFD93B;
			left: calc(50% - 16rpx);
			bottom: -8rpx;
			z-index: 99;
			border-radius: 4rpx;
		}
	}
</style>
